<template>
    <div class="content">
    <el-row :gutter="20">
        <el-col :span="6">
            <el-image class="image" :src="bookdata.image">
                
              </el-image>
        </el-col>

        <el-col :span="10">
            <el-card>
                <div><h1>{{bookdata.title}}</h1></div>
                <div><small>{{bookdata.author}}</small></div>
                <div><h3> {{bookdata.introduce}}</h3></div>
            </el-card>
        </el-col>

        <el-col :span="4">
            <el-card>
                <img>
            </el-card>
        </el-col>

        <el-col class="evalution">
            <div>
                <span>对于本书的满意度</span>
                <el-rate
                v-model="value"
                show-text>
                </el-rate>
            </div>
            <el-button class="btn" @click="reg">
                <!-- <a download="pdf" v-if="down" :href="bookdata.pdf">立即下载</a> -->
                <a download="pdf" v-if="down" :href="bookdata.pdf">立即下载</a>
                <a v-else>立即下载</a>
            </el-button>
            
        </el-col>
     
        
    </el-row>
    </div>
 
</template>

<script>
    export default{
        data() {
            return {
                bookdata:[],
                href:'',
                id:"",
                token:"",
                down:false,
                num:'',
                
            
               
            }
        },
        created() {
            this.getBook()
     
            
        },
        methods: {
            async getBook(){
                this.token = window.sessionStorage.getItem('token')
                
                this.href = window.location.href
                this.id = this.href.split('=')[1]
                console.log(this.id)
                const {data:res} = await this.$http.get(`/page-detail/${this.id}/`)
                console.log(res)
                this.bookdata = res.data
                    
               
            },
            
            async reg(){
                if(this.token){
                    const {data:res} = await this.$http.put(`/page-detail/${this.id}/`,{num:1,token:this.token})
                    console.log(res)
                    this.num = res.residue
                   
                    if(res.code === 1003){
                        
                        this.down = true
                    }
                    else{
                      
                        this.down = false
                        this.$message.error('开通会员可享受永久免费下载资源')
                    }
                    
                    
                    // this.getBook()
                }
                else{
                    this.$message.error('进行注册方可进行下载')
                } 
                
                
            }
        },
    }
</script>

<style lang="less" scoped>
.el-card{
box-shadow: 0 1px 1px rgba(0, 0,0, 0.15) !important;
}

.image{
    height: 300px;
    border: 5px grey solid;
    border-radius:10px
}

 .content{
    margin-left: 12%;
}

.evalution{
    margin-top:20px;
    
   
} 
.evalution .btn{
    margin-top: 40px;
}
</style>